<!--回单详情-->
<template>
  <div class="contain">
    <app-header></app-header>
    <div class="order-detail-top">
      <div class="order-detail-header">
        <span class="f-l">业务单号：<i>{{data.BBillNo}}</i></span>
      </div>
      <ul class="order-detail-info">
        <li class="displayflex">
          <label>回单时间</label>
          <p class="flex1">{{handItem.HandoverTime | time}}</p>
        </li>
        <li class="displayflex">
          <label>回单人</label>
          <p class="flex1">{{handItem.RPName}}</p>
        </li>
        <li class="displayflex">
          <label>收货地址</label>
          <p class="flex1">{{data.ArrivalProvince | province}}{{data.ArrivalCity | city}}{{data.ArrivalDistrict | district}}{{data.ArrivalAddress}}</p>
        </li>
        <li class="displayflex">
          <label>订单件数</label>
          <p class="flex1"><em class="red">{{parseInt(data.Pkgs | 0)}}</em>件</p>
        </li>
        <li class="displayflex">
          <label>签收件数</label>
          <p class="flex1"><em class="red">{{parseInt(data.RecPKGS | 0)}}</em>件</p>
        </li>
      </ul>
    </div>

    <uploader :title="'单据凭证'" :img-list="imgList" :max="maxPic" :view-only="true"></uploader>

    <div class="detail-customs" v-if="handItem.ExpReason">
      <p>差异原因：{{handItem.ExpReason}}</p>
      <p>备注：{{handItem.Memo}}</p>
    </div>
    


  </div>
</template>

<script>
import appHeader from '@/components/core/header/app_header.vue';
import uploader from '@/components/share/imageUploader/imageUploader.vue';
export default {
  name:'receiptDetail',
  components: {
    appHeader,
    uploader
  },
  data() {
    return {
      data: {},
      handItem: {},
      imgList: [],
      pkgs:0,
      maxPic:0,
    }
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo')) : null;
    },
  },
  created(){
    this.getData();
  },
  mounted() {
    this.$nextTick(function() {
    })
  },
  methods: {
    getData: function() {
      let query = {
        Guid: this.$route.query.BBGuid,
        TenantGuid: this.userinfo.TenantGuid,
        CorpGuid: this.userinfo.CorpGuid,
      };
      this.Ajax.post("getOrderDetail", query).then((res) => {
        if (res.IsSuccess) {
          this.data = res.Data;
          if(res.Data.HandoverList){
            this.handItem = res.Data.HandoverList.find((x) => {
              return x.HandoverType === '3';
            });
            if(this.handItem){
              this.imgList = JSON.parse(this.handItem.HandoverPict).logistics || [];
            }
          } else {
            this.Toast({
              message: '回单获取失败，数据错误：交接记录没有对应的回单项目'
            });
          }
          
        } else {
          this.Toast({
            message: res.ErrorMessage || "操作失败，请稍后重试"
          });
        }
      });
    },
  }
}
</script>
